import React, { useState } from 'react';
import { Button, Table, Form, Select, message, Row, Col } from 'antd';
import qs from 'qs';
import moment from 'moment';
import request from '@/http';
import { history } from '@/.umi/core/history';
import { PersonageGrade } from '@/pages/login/service';

export default () => {
  const [loading, setLoading] = useState(true);
  const [dataSource, setDataSource] = React.useState<any[]>([]);
  const [pagination, setPagination] = React.useState({
    current: 1,
    total: 1,
    pageSize: 5,
    showSizeChanger: true,
    pageSizeOptions: ['5', '10', '20', '50'],
    showQuickJumper: true,
  });

  const loadDataSource = async (
    dataParams: any,
    pageValue: any,
    pageSizeValue: any,
  ) => {
    const result: any = await request.post(
      '/api/teacher/Score/PersonalRating',
      {
        courseName: '',
        current: 0,
        size: 0,
        teamName: '',
      },
      {
        headers: {
          'Content-Type': 'application/json',
        },
      },
    );
    if (result.message == '成功') {
      const data: any = result.data.info.map((user: any) => ({
        key: `user_${user.id}`,
        id: user.id,
        collegesName: user.collegesName,
        courseName: user.courseName,
        majorName: user.majorName,
        operationName: user.operationName,
        position: user.position,
        sex: user.sex,
        studentName: user.studentName,
        studentNumber: user.studentNumber,
        teacherName: user.teacherName,
        teamName: user.teamName,
      }));
      const newPageObject = {
        ...pagination,
        current: pageValue,
        size: pageSizeValue,
        total: result.total,
      };
      setLoading(false);
      setPagination(newPageObject);
      setDataSource(data);
    } else {
      setLoading(false);
      message.error('暂无数据');
    }
  };

  React.useEffect(() => {
    loadDataSource(null, 1, pagination.pageSize).finally();
    selectDataSource();
  }, []);

  const pageOnChange = async (page: any) => {
    await loadDataSource(
      formObject.getFieldsValue(),
      page.current,
      page.pageSize,
    );
  };

  const [formObject] = Form.useForm();

  const searchPunch = async () => {
    const data = await formObject.getFieldsValue();
    const result: any = await request.post(
      '/api/teacher/Score/PersonalRating',
      {
        courseName: data.courseName,
        current: 0,
        size: 0,
        teamName: data.teamName,
      },
      {
        headers: {
          'Content-Type': 'application/json',
        },
      },
    );
    console.log(result);
    if (result.message == '成功') {
      const data = result.data.info.map((user: any) => ({
        key: `user_${user.id}`,
        id: user.id,
        collegesName: user.collegesName,
        courseName: user.courseName,
        majorName: user.majorName,
        operationName: user.operationName,
        position: user.position,
        sex: user.sex,
        studentName: user.studentName,
        studentNumber: user.studentNumber,
        teacherName: user.teacherName,
        teamName: user.teamName,
      }));
      setDataSource(data);
    } else {
      message.error('暂无数据');
      setDataSource(result.data.info);
    }
  };

  const ResetPunch = async () => {
    formObject.resetFields();
    loadDataSource(null, 1, pagination.pageSize);
  };

  const [courseName, setCourseName] = useState([]);
  const [groupName, setGroupName] = useState([]);

  const selectDataSource = async () => {
    const dataCourseName = await request.post(
      '/api/common_module/a_t_s/getCourse',
    );
    setCourseName(dataCourseName.data);
    const dataGroupName = await request.post(
      '/api/common_module/a_t_s/getTeam',
    );
    setGroupName(dataGroupName.data);
  };

  return (
    <>
      <Form layout="inline" form={formObject}>
        <Row gutter={24} style={{ width: '100%' }}>
          <Col span={8}>
            <Form.Item label="项目名称" name="courseName">
              <Select style={{ width: '100%' }} placeholder="请选择">
                {(courseName || []).map((courseName: any) => {
                  return (
                    <option
                      key={courseName.courseId}
                      value={courseName.courseName}
                    >
                      {courseName.courseName}
                    </option>
                  );
                })}
              </Select>
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item label="小组名称" name="teamName">
              <Select style={{ width: '100%' }} placeholder="请选择">
                {(groupName || []).map((groupName: any) => {
                  return (
                    <option key={groupName.teamId} value={groupName.teamName}>
                      {groupName.teamName}
                    </option>
                  );
                })}
              </Select>
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item>
              <Button type="primary" onClick={searchPunch}>
                查询
              </Button>
              <Button style={{ marginLeft: 10 }} onClick={ResetPunch}>
                重置
              </Button>
            </Form.Item>
          </Col>
        </Row>
      </Form>
      <div>
        <Table
          columns={[
            {
              title: '院系',
              dataIndex: 'collegesName',
              key: 'collegesName',
              align: 'center',
            },
            {
              title: '项目名称',
              dataIndex: 'courseName',
              key: 'courseName',
              align: 'center',
            },
            {
              title: '责任老师',
              dataIndex: 'teacherName',
              key: 'teacherName',
              align: 'center',
            },
            {
              title: '小组',
              dataIndex: 'teamName',
              key: 'teamName',
              align: 'center',
            },
            {
              title: '学生姓名',
              dataIndex: 'studentName',
              key: 'studentName',
              align: 'center',
            },
            {
              title: '性别',
              dataIndex: 'sex',
              key: 'sex',
              align: 'center',
            },
            {
              title: '学号',
              dataIndex: 'studentNumber',
              key: 'studentNumber',
              align: 'center',
            },
            {
              title: '项目角色',
              dataIndex: 'courseName',
              key: 'courseName',
              align: 'center',
            },
            {
              title: '专业',
              dataIndex: 'majorName',
              key: 'majorName',
              align: 'center',
            },
            {
              title: '操作',
              dataIndex: 'operationName',
              key: 'operationName',
              align: 'center',
              render: (text: any, record: any) => (
                <>
                  {record.operationName == '综合打分' ? (
                    <Button
                      type="link"
                      onClick={() => {
                        history.push('/global/personage/dispose');
                        PersonageGrade.savePersonageGradeId({ id: record.id });
                      }}
                    >
                      综合打分
                    </Button>
                  ) : (
                    <Button
                      type="link"
                      onClick={() => {
                        history.push('/global/personage/particulars');
                        PersonageGrade.savePersonageGradeId({ id: record.id });
                      }}
                    >
                      查看详情
                    </Button>
                  )}
                </>
              ),
            },
          ]}
          loading={loading}
          dataSource={dataSource}
          pagination={pagination}
          onChange={pageOnChange}
          tableLayout="fixed"
        />
      </div>
    </>
  );
};
